<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/index.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1, user-scalable=no">
  <script src="js/jquery.js"></script>
<script src="js/base.js"></script>
<script src="js/jsrender.js"></script>
<script src="myjs/bookDetails.js"></script>
</head>
<body>
<div class="header-box">
  <p>绘本详情</p>
</div>
<div class="bookDetails">
  <div class="bookDetails_box">
    <img src="img/index/tuceng 7@2x.png" id="bookImage1">
    <p id="bookName">牙虫大搬家 <b>（日本各大口腔医院儿童牙科门诊所热门推 荐：让孩子了解蛀牙，主动刷牙）</b></p>
    <div class="key_words" id="keyWord">
      <a href="javascript:;">情商</a>
      <a href="javascript:;">大师作品</a>
      <a href="javascript:;">性格养成</a>
      <a href="javascript:;">2-4岁</a>
    </div>
    <div class="xingxing1" style="margin-top:0.44rem;margin-left:0.42rem;position:relative;">
      <b class="pingfen" >评分：</b>
      <b id="evaluationStarImgs">
      <img src="img/index/xing5@2x.png">
      <img src="img/index/xing5@2x.png">
      <img src="img/index/xing5@2x.png">
      <img src="img/index/xing5@2x.png">
      <img src="img/index/xing6@2x.png">
      </b>
      <span id="evaluationStar">4.3</span>
      <span class="readed" style="position:absolute;right:0.34rem;">被借阅：<b>381</b>次</span>
    </div>
  </div>
  <div class="huise"></div>
  <div class="bookDetails_text">
    <table></table>
    <div class="bookDetails_text_item text_item1">
      <p>基本信息</p>
      <span style="margin-top:0.3rem;">出版社：<b id="press">连环画出版社</b></span><br>
      <span>作者：<b id="author">西本康子</b></span><br>
      <span>定价：<b id="price">￥29.8</b></span><br>
<!--       <span style="width:5.31rem;">可借阅站点：<b class="b11">西二旗万达广场购物中心三层A区3088室</b><b class="b22" style="display:none;">西二旗万达广场购物中心三层305室哔哩哔哩哔哩哔哩哔哩哔哩哔哩哔哩哔哩哔哩吧</b></span> -->
<!--       <i id="iii"> ></i> -->
<!--     </div> -->
<!--     <div class="bookDetails_text_item text_item2"> -->
      <span>描述： <b id="describe">这本书把造成蛀牙重要的原因——细菌（牙虫）描绘得非常生动、有趣。让小朋友了解细菌在蛀牙中扮演的重要角色。同时更将造成蛀牙的其他重要原因：甜食及口腔清洁涵盖在内，让儿童正确了解造成蛀牙的原因。</b></span>
<!--       <span style="margin-top:0.32rem;width:6.74rem;">这本书把造成蛀牙重要的原因——细菌（牙虫）描绘得非常生动、有趣。让小朋友了解细菌在蛀牙中扮演的重要角色。同时更将造成蛀牙的其他重要原因：甜食及口腔清洁涵盖在内，让儿童正确了解造成蛀牙的原因。</span> -->
    </div>
  </div>
  <div class="huise"></div>
  <div class="Details_evaluate">
    <table></table>
    <p>读后评价</p>
    <ul id="Details_list">
      <li>
        <p>
          <img src="img/index/touxiang@2x.png">
          <span>Fay 斐</span>
          <span class="xingxing1" style="display:inline-block;position:absolute;right:0.35rem;top:-0.16rem">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing6@2x.png">
            <span>4.3</span>
          </span>
        </p>
        <p>这套书太好了，孩子每天放学回家就拿着看，跟之前一回来就玩 手机 IPAI 简直判若两人</p>
        <p>2018-06-01</p>
      </li>
      <li>
        <p>
          <img src="img/index/touxiang@2x.png">
          <span>Fay 斐</span>
          <span class="xingxing1" style="display:inline-block;position:absolute;right:0.35rem;top:-0.16rem">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing6@2x.png">
            <span>4.3</span>
          </span>
        </p>
        <p>这套书太好了，孩子每天放学回家就拿着看，跟之前一回来就玩 手机 IPAI 简直判若两人</p>
        <p>2018-06-01</p>
      </li>
      
      <li>
        <p>
          <img src="img/index/touxiang@2x.png">
          <span>Fay 斐</span>
          <span class="xingxing1" style="display:inline-block;position:absolute;right:0.35rem;top:-0.16rem">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing6@2x.png">
            <span>4.3</span>
          </span>
        </p>
        <p>这套书太好了，孩子每天放学回家就拿着看，跟之前一回来就玩 手机 IPAI 简直判若两人</p>
        <p>2018-06-01</p>
        
<!--         <div class="details_pic"> -->
<!--           <p><img src="img/index/tuceng 10@2x.png"></p> -->
<!--           <p><img src="img/index/tuceng 10@2x.png"></p> -->
<!--           <p><img src="img/index/tuceng 10@2x.png"></p> -->
<!--         </div> -->
      </li>
    </ul>
  </div>
</div>
<div class="footer_kb"></div>
<div class="footer_kb1"></div>
<div class="appoin_eva">
  <a id="aYuyue" href="appointment.html" class="a_act">预约</a>
  <a id="aPingjia" href="damageReport.html?tp=1">评价</a>
</div>
</body>
<!-- 图书展示模板 -->
<script id="book_evaluation_tmpl" type="text/x-jsrender">

     <li>
        <p>
          <img src="{{:#data.user.headimgurl}}">
          <span>{{:#data.user.nickname}}</span>
          <span class="xingxing1" style="display:inline-block;position:absolute;right:0.35rem;top:-0.16rem">
           {{if evaluationStar<1}}
            <img src="img/index/xing6@2x.png">
			{{/if}}
			{{if evaluationStar>0 && evaluationStar<2}}
            <img src="img/index/xing5@2x.png">
			{{/if}}
			{{if evaluationStar>=2 && evaluationStar<3}}
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
			{{/if}}
			{{if evaluationStar>=3 && evaluationStar<4}}
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
			{{/if}}
			{{if evaluationStar>=4 && evaluationStar<5}}
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
			{{/if}}
			{{if evaluationStar>=5}}
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
			{{/if}}

            <span>{{:evaluationStar}}</span>
          </span>
        </p>
        <p>{{:evaluationContent}}</p>
        <p>{{dataFormat:createTime}}</p>
      </li>
</script>

<script>
//jsrender 转换器
$.views.converters({
	  dataFormat: function (value) {
	    return value.replace("T"," ");
	  }
	});

  var isshowmore=false;
  $('#iii').click(function () {
    if (isshowmore){
      isshowmore=false;
      $('.b11').css('display','inline-block');
      $('.b22').css('display','none');
    } else{
      isshowmore=true;
      $('.b11').css('display','none');
      $('.b22').css('display','inline');
    }

  });
</script>
</html>